{# Renders field for bootstrap 3 standards.

    Params:
        field - WTForm field
        kwargs - pass any arguments you want in order to put them into the html attributes.
        There are few exceptions: for - for_, class - class_, class__ - class_

    Example usage:
        {{ macros.render_field(form.email, placeholder='Input email', type='email') }}
#}
{% macro render_field(field, label_visible=true) -%}
    {{ "<tr>"|safe if 'o' in kwargs.get('tr','oc')  }}
    <td class="{% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}  ">
        {% if (field.type != 'HiddenField' and field.type !='CSRFTokenField') and label_visible %}
            <label for="{{ field.id }}" class="control-label"
                   {% if kwargs.get('help') %} data-toggle="popover" data-placement="right" data-content="{{ kwargs.get('help') }}" data-html="true"{% endif %}
            >{{ field.label.text }}
              {% if kwargs.get('help') %} <span class="glyphicon glyphicon-info-sign"></span> {% endif %}
              {% if field.flags.required %} <span style="font-weight: bold;color: red;">*</span> {% endif %}
            </label>
        {% endif %}
    </td><td {{ "colspan="+(kwargs.pop('colspan')|string) if kwargs.get('colspan') }} >
{#        {{ field(class_='form-control', **kwargs) }}#}
    {{ field(**kwargs) }}
    {% if kwargs.get('suffix') %} {{ kwargs.get('suffix') }}{% endif %}
        {% if field.errors %}
            {% for e in field.errors %}
                <p class="help-block">{{ e }}</p>
            {% endfor %}
        {% endif %}
    </td>    {{ "</tr>"|safe if 'c' in kwargs.get('tr','oc') }}
{%- endmacro %}

{# Renders checkbox fields since they are represented differently in bootstrap
    Params:
        field - WTForm field (there are no check, but you should put here only BooleanField.
        kwargs - pass any arguments you want in order to put them into the html attributes.
        There are few exceptions: for - for_, class - class_, class__ - class_

    Example usage:
        {{ macros.render_checkbox_field(form.remember_me) }}
 #}
{% macro render_checkbox_field(field) -%}
    {{ "<tr>"|safe if 'o' in kwargs.get('tr','oc')  }}
        <td>
            {{ field.label }}
        </td>
        <td>
            {{ field(type='checkbox', **kwargs) }}
        </td>
    {{ "</tr>"|safe if 'c' in kwargs.get('tr','oc') }}
{%- endmacro %}

{# Renders radio field
    Params:
        field - WTForm field (there are no check, but you should put here only BooleanField.
        kwargs - pass any arguments you want in order to put them into the html attributes.
        There are few exceptions: for - for_, class - class_, class__ - class_

    Example usage:
        {{ macros.render_radio_field(form.answers) }}
 #}
{% macro render_radio_field(field) -%}
    {% for value, label, _ in field.iter_choices() %}
        <div class="radio">
            <label>
                <input type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}">{{ label }}
            </label>
        </div>
    {% endfor %}
{%- endmacro %}

{# Renders WTForm in bootstrap way. There are two ways to call function:
     - as macros: it will render all field forms using cycle to iterate over them
     - as call: it will insert form fields as you specify:
     e.g. {% call macros.render_form(form, action_url=url_for('login_view'), action_text='Login',
                                        class_='login-form') %}
                {{ macros.render_field(form.email, placeholder='Input email', type='email') }}
                {{ macros.render_field(form.password, placeholder='Input password', type='password') }}
                {{ macros.render_checkbox_field(form.remember_me, type='checkbox') }}
            {% endcall %}

     Params:
        form - WTForm class
        action_url - url where to submit this form
        action_text - text of submit button
        class_ - sets a class for form
    #}
{% macro render_form(form, action_url='', action_text='Submit', class_='', btn_class='btn btn-default') -%}

    <form method="POST" action="{{ action_url }}" role="form" class="{{ class_ }}">
        {{ form.hidden_tag() if form.hidden_tag }}
        {% if caller %}
            {{ caller() }}
        {% else %}
            {% for f in form %}
                {% if f.type == 'BooleanField' %}
                    {{ render_checkbox_field(f) }}
                {% elif f.type == 'RadioField' %}
                    {{ render_radio_field(f) }}
                {% else %}
                    {{ render_field(f) }}
                {% endif %}
            {% endfor %}
        {% endif %}
        <button type="submit" class="{{ btn_class }}">{{ action_text }} </button>
    </form>
{%- endmacro %}


<style>
 #edittab {margin: 10px;}
 #edittab td:nth-child(2n+1) {width: 240px;padding-right: 15px;padding-left:5px;}
</style>


<form method="POST" role="form" class="">
<table id="edittab">
  <tr>
    <td colspan="4">
<a href="#create-project" data-toggle="collapse"><b>数据组织结构 <span class="glyphicon glyphicon-info-sign"></span></a></p>
<div id="create-project" class="collapse panel panel-default">
  <div class="panel-body">
    <p><b>UVP :</b>
      <ul>
<li>颗粒物和CTD数据：数据必须在« Zooprocess »的架构下排布：
<ul>
<li>仪器参数 : « :\uvp5_snXXX_cruise\config\UVP5_Settings\ »文件夹下的« uvp5_configuration_data.txt »文件中</li>
<li>航次信息和数据所有权：位于« :\uvp5_snXXX_cruise\config\ »文件夹下的« cruise_info.txt »文件中</li>
<li>样品（剖面）的元数据信息：位于« :\uvp5_snXXX_cruise\meta\ »文件夹下的« uvp5_header_snXXX_cruise.txt » 文件中，这个文件必须存在，以导入您的数据。</li>
<li>UVP颗粒数据文件（*.bru, *.dat & *.hdr）位于以下位置：
  <ul>
    <li>« :\uvp5_snXXX_cruise\raw\ »文件夹下</li>
    <li>若经Zooprocess处理过，则位于« :\uvp5_snXXX_cruise\work\ »文件夹下</li>
    <li>若经Zooprocess处理过，且不在之前的文件夹中，则位于« :\uvp5_snXXX_cruise\results\ »文件夹下</li>
  </ul></li>
<li>oCTD数据（可选）位于« :\uvp5_snXXX_cruise\ctd_data_cnv\ »文件夹下（请参阅将CTD数据编排成导入格式的导入界面）</li>
  </ul>
<li>浮游动物及碎屑图片：数据必须编排在«Zooprocess»架构下: 处理过的图片和相关的TSV文件将分别从«:\uvp5_snXXX_cruise\work\»文件夹导入ECOTAXA相关项目下（不在此颗粒物模块中)。
    </ul>
</p>
</div></div>

    </td>
  </tr>
{{ render_field(form.ptitle,tr='oc',style="width:450px;",colspan=3) }}
<tr><td > <label for="rawfolder" class="control-label"><a href="#info2" data-toggle="collapse" style="color: black">根文件夹 <span class="glyphicon glyphicon-info-sign"></span></a></label></td><td colspan="3">
  <div class="input-group" style="width: 700px;">
    <input type="text" class="form-control" id="ServerPath" name="rawfolder" value="{{ form.rawfolder.data or "" }}" onchange="ServerPathChange()">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button"  data-toggle="modal" data-target="#FileModal">
            <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span></button>
        <button class="btn btn-default" type="button" onclick="ReadMeta();">
          读取元数据信息</button>
    </span>
</div>
  <div id="info2" class="collapse panel panel-default">
  <div class="panel-body">
    从存储盘中选择UVP根文件夹（申请FTP权限，上传您的项目或从本地存储盘中上传您的数据），
<br> 点击“读取元数据信息”按钮，以再一次读取« cruise_info.txt »文件。
  </div></div>

</td></tr>
{{ render_field(form.ownerid,tr='oc',colspan=3,help="独一无二的项目管理人的名称，在ECOTAXA用户列表中可选择。项目所有者能够管理与Ecotaxa项目的权限相关的一些权限（若项目存在的话）。") }}
{{ render_field(form.projid,tr='oc',colspan=3,help="您将从«work»文件夹中导入图像的相关项目，您可以在这里新创建。") }}
{{ render_field(form.instrumtype,tr='o',help="从根文件夹名字中导入<br><b>必须是 :</b> uvp5") }}
{{ render_field(form.default_instrumsn,tr='c',help="从根文件夹名中选择") }}
{{ render_field(form.op_name,tr='o',help="负责数据获取的人员") }}
{{ render_field(form.op_email,tr='c') }}
{{ render_field(form.cs_name,tr='o',help="指挥这次航次的人") }}
{{ render_field(form.cs_email,tr='c') }}
{{ render_field(form.do_name,tr='o',help="拥有数据集的人，这对于发表权限来说非常重要") }}
{{ render_field(form.do_email,tr='c') }}
{{ render_field(form.prj_acronym,tr='o',help="自由字段（例如在cruise_info.txt文件中填写的字段)") }}
{{ render_field(form.default_depthoffset,tr='c',help="压力传感器与仪器采样/成像区域之间的垂直距离") }}
{{ render_field(form.cruise,tr='o',help="从根文件夹名中选择") }}
{{ render_field(form.ship,tr='c') }}
{{ render_field(form.prj_info,tr='oc',colspan=3,style="width:500px;",help="从cruise_info.txt文件中读取") }}
{{ render_field(form.public_visibility_deferral_month,tr='o',style="width:50px;",suffix='个月',help="数据显示后的延迟") }}
  <td colspan="2">延迟开始日期是项目中较早样品的日期，参见样品元数据信息页面，可看到结果展示/下载日期。</td></tr>
{{ render_field(form.public_partexport_deferral_month,tr='o',style="width:50px;",suffix='个月',help="允许数据下载的延迟") }}
{{ render_field(form.public_zooexport_deferral_month,tr='c',style="width:50px;",suffix='个月',help="请注意，相关的项目必须是可见的") }}


    <tr>
        <td colspan="4">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-save "></span> 保存</button>

{% if prjid>0 %}
    <a href="/part/prj/{{ prjid }}" class="btn btn-warning"> 取消</a>
    <button type="button" onclick="$('#confirm').modal('show')" class="btn btn-danger"><span class="glyphicon glyphicon-erase"></span> 移除项目</button>
{% else %}
  <a href="/part/prj/" class="btn btn-warning"> 取消</a>
{% endif %}
        </td>
    </tr>
</table>
</form>

<div class="modal " id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">确认需要移除这个项目</h4>
      </div>
      <div class="modal-body">
            <form method="post" action="/part/prjedit/{{ prjid }}" style="display: inline-block">
        <input type="hidden" name="delete" value="Y">
    <button  class="btn btn-danger"><span class="glyphicon glyphicon-erase"></span> 确认移除项目</button>
        </form>
    <button  type="button" class="btn btn-warning" onclick="$('#confirm').modal('hide')"> 取消</button>

      </div>
    </div>
  </div>
</div>


<div class="modal " id="FileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">选择一个目录或者zip压缩包文件</h4>
      </div>
      <div class="modal-body">
        <div id="FileModalBody">...</div>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
    $('#FileModal').on('show.bs.modal', function () {
        $("#TaxoModalBody").html("");
        {# Pour eviter les conflit sur le jstree suite à des ouverture successive car le jstree est dans la modal cachée #}
        $("#FileModalBody").html("Loading...").load("/common/ServerFolderSelect");
    });
    $('[data-toggle="popover"]').popover();
});
function ReadMeta() {
    $.getJSON( "/part/readprojectmeta",{path:$("#ServerPath").val()}, function( data ) {
      $.each( data, function( key, val ) {
          $('#'+key).val(val);
      });
    });
}
function ServerPathChange(){
  ReadMeta();
}

</script>